<template>
    <div>
        <div class="toolbar">
            <el-button v-auth="'account:add'" type="primary" icon="plus" @click="editService(true)">添加</el-button>
            <el-button v-auth="'account:update'" :disabled="chooseId == null" @click="editService(false)" type="primary" icon="Edit">编辑</el-button>
            <el-button v-auth="'account:del'" :disabled="chooseId == null" @click="deleteAccount()" type="danger" icon="Delete">删除</el-button>
            <div style="float: right">
                <el-input placeholder="请输入服务code" style="width: 140px" v-model="query.code" @clear="search()" clearable></el-input>
                <el-button @click="search()" type="success" icon="search"></el-button>
            </div>
        </div>
        <el-table :data="datas" border ref="table" @current-change="choose" show-overflow-tooltip>
            <el-table-column label="选择" width="50px">
                <template #default="scope">
                    <el-radio v-model="chooseId" :label="scope.row.id">
                        <i></i>
                    </el-radio>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="code" min-width="115"></el-table-column>
            <el-table-column prop="name" label="服务名" min-width="125"></el-table-column>
            
            <el-table-column align="center" prop="status" label="状态" min-width="63">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 1" type="success" size="small">正常</el-tag>
                    <el-tag v-if="scope.row.status == 0" type="danger" size="small">禁用</el-tag>
                </template>
            </el-table-column>

            <el-table-column min-width="115" prop="creator" label="创建账号"></el-table-column>
            <el-table-column min-width="160" prop="createTime" label="创建时间">
                <template #default="scope">
                    {{ $filters.dateFormat(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column min-width="115" prop="modifier" label="更新账号"></el-table-column>
			<el-table-column min-width="160" prop="updateTime" label="修改时间">
				<template #default="scope">
					{{ $filters.dateFormat(scope.row.updateTime) }}
				</template>
			</el-table-column>

            <el-table-column label="操作" min-width="200px">

            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="handlePageChange"
            style="text-align: center"
            background
            layout="prev, pager, next, total, jumper"
            :total="total"
            v-model:current-page="query.pageNum"
            :page-size="query.pageSize"
        />

        <service-edit v-model:visible="serviceEditDialog.visible" v-model:service="serviceEditDialog.data" @val-change="valChange()" />
    </div>
</template>

<script lang='ts'>
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
import ServiceEdit from './ServiceEdit.vue';
import enums from '../enums';
import { serviceApi } from '../api';
import { ElMessage } from 'element-plus';
export default defineComponent({
    name: 'ServiceList',
    components: {
        ServiceEdit,
    },
    setup() {
        const state = reactive({
            chooseId: null,
            /**
             * 选中的数据
             */
            chooseData: null,
            /**
             * 查询条件
             */
            query: {
                pageNum: 1,
                pageSize: 10,
            },
            datas: [],
            total: 0,
            serviceEditDialog: {
                visible: false,
                data: null,
            },
        });

        onMounted(() => {
            search();
        });

        const choose = (item: any) => {
            if (!item) {
                return;
            }
            state.chooseId = item.id;
            state.chooseData = item;
        };

        const search = async () => {
            let res: any = await serviceApi.list.request(state.query);
            state.datas = res.list;
            state.total = res.total;
        };

        const handlePageChange = (curPage: number) => {
            state.query.pageNum = curPage;
            search();
        };

        const editService = (isAdd = false) => {
            if (isAdd) {
                state.serviceEditDialog.data = null;
            } else {
                state.serviceEditDialog.data = state.chooseData;
            }
            state.serviceEditDialog.visible = true;
        };


        const valChange = () => {
            state.serviceEditDialog.visible = false;
            state.chooseId = null;
            state.chooseData = null;
            search();
        };

        const deleteAccount = async () => {
            try {
                await serviceApi.del.request({ id: state.chooseId });
                ElMessage.success('删除成功');
                search();
            } catch (error) {
                ElMessage.error('刪除失败');
            }
        };

        return {
            ...toRefs(state),
            enums,
            search,
            handlePageChange,
            choose,
            editService,
            valChange,
            deleteAccount,
        };
    },
});
</script>
<style lang="scss">
</style>
